<%--
  Created by IntelliJ IDEA.
  User: yangjianbo
  Date: 2015/10/9
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>

<head>

    <title>菜单管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    平台管理 <span class="c-gray en">&gt;</span>
    菜单管理 </nav>
<div class="cl">
    <div class="cl pd-5 bg-1 bk-gray mt-20" style="width:99%" style="background-color:#a6c9e2">
                <span class="l">
                    <a href="javascript:;" onClick="menuAdd()"
                                   class="btn btn-primary radius" ><i class="icon-plus"></i> 添加节点</a>
                    <a href="javascript:;" onClick="menuEdit()"
                       class="btn btn-secondary  radius" ><i class="icon-plus"></i> 编辑节点</a>
                    <a href="javascript:;" onClick="menuDel()" class="btn btn-danger radius" >
                    <i class="icon-trash"></i> 删除节点</a></span>

    </div>

    <div class="l" style="width:40%">

        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
 <!-- <div class="r" style="width:60%">
        <div class="panel panel-secondary">
            <div class="panel-header">权限关系</div>
            <div class="panel-body">
                    <div class="skin-minimal">
                        <div class="check-box col-12 mt-20 pd-5">
                            <c:forEach var="role" items="${rolelist}">
                                <%--用EL表达式调用list对象的属性循环输出对象的各个属性值--%>
                                    <div class="check-box col-4">
                                        <input type="checkbox" id="${role.unid}" value="1" onclick="roleoncheck(this)">
                                        <label for="${role.unid}">${role.rolename}</label>
                                    </div>
                            </c:forEach>
                        </div>
                    </div>
            </div>
        </div>
    </div>-->
</div>
</body>

</html>

<%@include file="../../head-ui.jsp" %>
<script >

    <!--
    $(function(){
        $.ajax({
            url:'<%=request.getContextPath()%>/back/menu/getAllMenu.do',
            type:'get',
            async: false,
            success:function(data){
                zNodes = data.data;
            }
        })

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        })});
    var setting = {
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback:{
            onClick:zTreeOnClick
        }
    };

    var zNodes =null;

    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                py = $("#py").attr("checked")? "p":"",
                sy = $("#sy").attr("checked")? "s":"",
                pn = $("#pn").attr("checked")? "p":"",
                sn = $("#sn").attr("checked")? "s":"",
                type = { "Y":py + sy, "N":pn + sn};
        zTree.expandAll(true);
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
    });
    //树刷新
    function refreshTree(){
        $.ajax({
            url:'<%=request.getContextPath()%>/back/menu/getAllMenu.do',
            type:'get',
            async: false,
            success:function(data){
                zNodes = data.data;
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                treeObj.expandAll(true);
            }});
    }
    //节点选择
    function zTreeOnClick(event, treeId, treeNode) {
        // alert(treeNode.pId + ", " + treeNode.name);
        $.ajax({
            url:'<%=request.getContextPath()%>/back/menu/rolelink.do?unid='+treeNode.id,
            type:'get',
            async: false,
            success:function(data){
                $(".skin-minimal :checkbox ").each(function(item){
                    $('#'+this.id).iCheck('uncheck');
                })
                for(var i=0;i<data.data.length;i++){
                    var role=data.data[i].roleunid;
                    $('#'+role).iCheck('check');
                }
            }
        })
    };
    //节点添加
    function menuAdd(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length>0) {
            layer_show('菜单添加',$("#contextPath").val()+"/back/menu/add_page"+nodes[0].id+".do",'500','400');
        }
        else
        {
            layer.alert("请选择节点");
        }
    };
    function menuEdit(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length>0) {
            layer_show('菜单编辑',$("#contextPath").val()+"/back/menu/edit_page"+nodes[0].id+".do",'500','400');
        }
        else
        {
            layer.alert("请选择节点");
        }
    };
    //节点删除
    function menuDel(){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length > 0) {
            layer.confirm('确认要删除吗？', function () {

                $.post($("#contextPath").val() + "/back/menu/dodel.do", {unid: nodes[0].id}, function (res) {
                    if (res.status == "0") {
                        layer.msg('已删除!', {icon: 1, time: 1000});
                        refreshTree();
                    } else {
                        layer.msg('删除失败!', {icon: 1, time: 1000});
                    }
                })

            });
        }
        else {
            layer.alert("请选择节点");
        }
    };
    //角色check单击事件
    function roleoncheck(c){
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getSelectedNodes();
        var enable= c.checked==true?1:0;
        var treeid=null;
        if (nodes.length > 0) {
            treeid=nodes[0].id;
            $.post($("#contextPath").val() + "/back/menu/dorolelink.do", {menuunid: nodes[0].id,roleunid: c.id,enable:enable}, function (res) {
                if (res.status == "1") {
                    layer.msg('操作成功!', {icon: 1, time: 1000});
                } else {
                    layer.msg('操作失败!', {icon: 1, time: 1000});
                    var check=enable==1?'uncheck':'check';
                    $('#'+ c.id).iCheck(check);
                }
            })
        }
        else {
            layer.alert("请先择节点");
        }
    }
    //-->
</script>

